<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 属性选择 */
        h1{
            color:red;
        }
        /* 属性加多个标签选择 */
        h1[title][id]{
            color:pink;
        }
        /* 属性加标签 */
        h1[title]{
            color:blue;
        }
        /* 属性加标签加标签名 */
        h1[title="yang"]{
            color:green;
        }
        /* 属性标签名正则表达式 */
        h1[title$="com"]{
            color: blueviolet;
        }
        /* 属性选择器内容筛选:通配符*前面带yang的都被变成黑色了
            ~yang代表单纯为yang的都被选中，如果是com.yang 那么不生效，但如果是com. yang 那么会失效
            | 代表和内容连接起来的比如说|yang-com 会匹配 但是|yang.com 会失效
        */
        h1[title*='yang']{
            color: black;
        }
    </style>
</head>
<body>
    <h1 title="yang">杨村恶霸</h1>
    <h1 title="yang.com">杨村恶霸.com</h1>
    <h1 title>杨村恶霸</h1>
    <h1 title id>杨村恶霸</h1>
</body>
</html>